/*
 * @Author: LGX
 * @Date: 2022-03-30 23:20:06
 * @LastEditors: LGX
 * @LastEditTime: 2022-04-11 16:16:45
 * @FilePath: \erp-management-system\src\components\customerseas\Search.jsx
 * @Description: 高级搜索
 * 
 */
import React, { useState, useEffect } from 'react'
import { Row, Col, Space, Input, DatePicker, Select, Form, Cascader, message } from 'antd'
import MyButton from '../customerseas/MyButton'
import CheckBtn from './CheckBtn'
import PubSub from 'pubsub-js'
import chinaDivision from '../../utils/chinaDivision';
import axios from '../../utils/http';
import store from '../../redux/store'
import myAxios from '../../utils/myAxios'
import { AsyncGetOptionAction } from '../../redux/action/customerAction/option'
const { RangePicker } = DatePicker;
const { Option } = Select;
const provinceData = ['体育', '电子'];
const cityData = {
    // 体育: [],
    // 电子: [],
    体育: ['足球', '篮球', '游泳'],
    电子: ['电竞', 'LOL', 'CF'],
};
//复选按钮数组
const checkArr = [
    { id: 1, title: '有跟单', check: false },
    { id: 2, title: '有订单', check: false },
    { id: 3, title: '有合同', check: false },
    { id: 4, title: '有售后', check: false },
    { id: 5, title: '有附件', check: false }]
export default function Search() {
    //清空清除按钮选中的状态
    const [stateBtn, setstateBtn] = useState(checkArr);
    const [form] = Form.useForm();
    //联动select下拉框
    const [cities, setCities] = React.useState(cityData[provinceData[0]]);
    const [secondCity, setSecondCity] = React.useState('请选择');
    //所有select框的值
    const [selectAllList, setSelectAllList] = useState([])
    //地区选择框
    // const handleProvinceChange = value => {
    //     setCities(cityData[value]);
    //     setSecondCity(cityData[value][0]);
    // };
    const onSecondCityChange = value => {
        setSecondCity(value);
    };
    //立即搜索按钮
    const onFinish = (values) => {
        const { provinces, updateTime, entryTime } = values
        var searchObj = {}
        var conditionList = []
        stateBtn.forEach((item) => {
            if (item.check) {
                conditionList.push(item.id)
            }
        })
        //添加地区\时间字段到对象
        searchObj = { ...values, conditionList, city: provinces == undefined ? undefined : provinces[1], province: provinces == undefined ? undefined : provinces[0], area: provinces == undefined ? undefined : provinces[2], updateTime1: updateTime == undefined ? undefined : updateTime[0]._d, updateTime2: updateTime == undefined ? undefined : updateTime[1]._d, entryTime1: updateTime == undefined ? undefined : entryTime[0]._d, entryTime2: updateTime == undefined ? undefined : entryTime[1]._d, status: '1' }
        console.log('当前表单填写的值', searchObj);
        // 发起搜索请求 
        axios({
            url: '/gongHai/findPublicCustomerListByLikeAll',
            method: 'get',
            params: searchObj
        }).then(res => {
            if (res.data.code == 200) {
                message.success(res.data.data.length?`查询成功，共查询到${res.data.count}条数据`:'查询成功，当前还没有数据')
                // console.log(res);
                PubSub.publish('searchList', res.data.data) 
            }
        })
    };
    //子组件按钮传递id
    const getChecked = (id) => {
        stateBtn.forEach((item) => {
            if (item.id == id) {
                item.check = !item.check
            }
        })
        setstateBtn(stateBtn.concat([]))
    }
    //清空搜索框
    function resetFrom() {
        form.resetFields();
        stateBtn.forEach((item) => {
            item.check = false
        })
    }
    //写一个方法，来处理商品分类
    function bC(arr) {
        let tempArr = []
        arr.forEach(element => {
            tempArr.push(element.bigClass)
        });
        return tempArr
    }
    //选择了大类以后，再去请求对应小类的数据
    const handleProvinceChange = value => {
        //修改了大类之后，需要把之前选择的小类选项置空
        form.setFieldsValue({
            smallClass: ''
        })
        myAxios({
            method: 'get',
            url: '/customer/customerComSort/findSmallClass',
            headers: {
                'isLoading': false
            },
            params: { bigClass: value }
        })
            .then(res => {
                console.log(res.data.data);
                let tempArr = []
                res.data.data.forEach(item => {
                    tempArr.push(item.smallClass)
                })
                setsmallClass(tempArr);
                setCities(smallClass[value]);
            })

    };
    useEffect(() => {
        store.dispatch(AsyncGetOptionAction())
        let unSubscribe = store.subscribe(() => {
            console.log(store.getState().customerReducer.optionReducer);
            // setSelectAllList(store.getState().customerReducer.optionReducer)
            setjobList(store.getState().customerReducer.optionReducer.customerPosition)
            setcustomerType(store.getState().customerReducer.optionReducer.customerType)
            setcustomerSource(store.getState().customerReducer.optionReducer.customerSource)
            setcustomerIndustry(store.getState().customerReducer.optionReducer.customerIndustry)
            setcustomerLevel(store.getState().customerReducer.optionReducer.customerLevel)
            setdepartment(store.getState().customerReducer.optionReducer.department)
            setemployee(store.getState().customerReducer.optionReducer.employee)
            setbigClass(bC(store.getState().customerReducer.optionReducer.comSort))
        })
        //销毁监听
        return () => unSubscribe()
    }, []);
    const [jobList, setjobList] = useState([]);
    const [customerType, setcustomerType] = useState([]);
    const [customerSource, setcustomerSource] = useState([]);
    const [customerIndustry, setcustomerIndustry] = useState([]);
    const [customerLevel, setcustomerLevel] = useState([]);
    const [department, setdepartment] = useState([]);
    const [employee, setemployee] = useState([]);
    const [bigClass, setbigClass] = useState([]);
    const [smallClass, setsmallClass] = useState([]);

    // const [isModalVisible, setisModalVisible] = useState(false);
    // const [toAddOptionData, settoAddOptionData] = useState([]);
    // const [toAddOptionType, settoAddOptionType] = useState([]);

    return (
        <>
            <div style={{ width: '100%', border: '1px solid #e1e2e4', borderRadius: '10px', padding: '15px', margin: '15px 0', backgroundColor: '#eff0ef' }}>
                <Form
                    wrapperCol={{ span: 16 }}
                    labelCol={{ span: 4 }}
                    form={form}
                    name="advanced_search"
                    className="ant-advanced-search-form"
                    onFinish={onFinish}
                >
                    <Row gutter={24} justify='space-between'>
                        {/* 第一列表单 */}
                        <Col span={8} >
                            <Form.Item
                                name='number'
                                label='编号'
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item
                                name='positionId'
                                label='职位'
                            >
                                <Select placeholder="请选择">
                                    {jobList.map((item) => {
                                        return <Option value={item.id} key={item.id}>{item.title}</Option>
                                    })}
                                </Select>

                            </Form.Item>
                            <Form.Item
                                name='website'
                                label='网址'
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item
                                name='updateTime'
                                label='最后更新'
                            >
                                <RangePicker />
                            </Form.Item>
                            <Form.Item
                                name='address'
                                label='详细地址'
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item
                                name='remarks'
                                label='备注'
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item
                                name='customerSourceId'
                                label='客户来源'
                            >
                                <Select placeholder="请选择" >
                                    {customerSource.map((item, index) => {
                                        return <Option value={item.id} key={index}>{item.title}</Option>
                                    })}
                                </Select>
                            </Form.Item>
                            <Form.Item
                                name='employeeInputName'
                                label='录入者'
                            >
                                <Select placeholder="请选择" >
                                    {employee.map((item) => {
                                        return <Option value={item.id} key={item.id}>{item.name}</Option>
                                    })}
                                </Select>
                            </Form.Item>
                        </Col>
                        {/* 第二列表单 */}
                        <Col span={8} >
                            <Form.Item name='customerUsername' label='客户名称'>
                                <Input />
                            </Form.Item>
                            <Form.Item name='phoneNumber' label='手机号'>
                                <Input />
                            </Form.Item>
                            <Form.Item
                                name='customerIndustryId'
                                label='所属行业'
                            >
                                <Select placeholder="请选择" >
                                    {customerIndustry.map((item, index) => {
                                        return <Option key={index} value={item.id} >{item.title}</Option>
                                    })}
                                </Select>
                            </Form.Item>
                            <Form.Item
                                name='provinces'
                                label='所在地区'
                            >
                                <Cascader options={chinaDivision} placeholder="请选择" />
                            </Form.Item>
                            <Form.Item
                                name='postal'
                                label='邮编'
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item
                                name='customerTypeId'
                                label='客户类型'
                            >
                                <Select placeholder="请选择" >

                                    {customerType.map((item) => {
                                        return <Option value={item.id} key={item.id}>{item.title}</Option>
                                    })}
                                </Select>
                            </Form.Item>
                            <Form.Item label="商品类别" >
                                <Space>
                                    <Form.Item name='comSortName1'>
                                        <Select placeholder='请选择' style={{ width: 120 }} onChange={handleProvinceChange}>
                                            {bigClass.map(province =>    (
                                                <Option key={province}>{province}</Option>
                                            ))}
                                        </Select>
                                    </Form.Item>
                                    <Form.Item name='comSortName2'>
                                        <Select style={{ width: 120 }} placeholder='请选择' onChange={onSecondCityChange}>
                                            {smallClass.map(city => (
                                                <Option key={city}>{city}</Option>
                                            ))}
                                        </Select>
                                    </Form.Item>
                                </Space>
                            </Form.Item>
                            <Form.Item
                                name='applyId'
                                label='审核中'
                            >
                                <Select placeholder="请选择" >
                                    <Option value='1'>是</Option>
                                    <Option value='0'>否</Option>

                                </Select>
                            </Form.Item>

                        </Col>
                        {/* 第三列表单 */}
                        <Col span={8} >
                            <Form.Item
                                name='customerName'
                                label='联系人'
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item
                                name='email'
                                label='电子邮箱'
                            >
                                <Input />

                            </Form.Item>
                            <Form.Item
                                name='entryTime'
                                label='录入时间'
                            >
                                <RangePicker />
                            </Form.Item>
                            <Form.Item
                                name='qq'
                                label='QQ'
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item
                                name='customerLevelId'
                                label='客户级别'
                            >
                                <Select placeholder="请选择" >

                                    {customerLevel.map((item) => {
                                        return <Option value={item.id} key={item.id}>{item.title}</Option>
                                    })}
                                </Select>
                            </Form.Item>
                            <Form.Item
                                name='departmentId'
                                label='部门'
                            >
                                <Select placeholder="请选择" >

                                    {department.map((item, index) => {
                                        return <Option value={item.departmentName} key={index}>{item.departmentName}</Option>
                                    })}
                                </Select>
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row gutter={24}>
                        <Col span={24}>
                            <Form.Item
                                labelCol={8}
                                name='other'
                                label='其他'
                            >
                                {/* 复选按钮组件，传递方法和要渲染的按钮数组 */}
                                <CheckBtn click={getChecked} stateBtn={stateBtn} />
                            </Form.Item>

                        </Col>
                    </Row>
                    {/* 提交按钮 */}
                    <Row align='middle'>
                        <Col span={4} offset={10} style={{ fontSize: '38px', padding: '10px 0' }}>
                            <Space>
                                <MyButton size="middle" color='#49b377' htmlType="submit" title='立即搜索' />
                                <MyButton size="middle" color='#505050' onClick={resetFrom} title='清空条件' />
                                <MyButton size="middle" color='#b1b3b2' title='导出数据' />
                            </Space>
                        </Col>
                    </Row>
                </Form>
            </div>
        </>
    )
}
